<template>
  <div class="TabContainer">
    TabContainer组件
    <TabItemT :tabs="tabs" @changeIndex="changeIndex"/>
    <div class="top">{{this.pages[activeIndex]}}</div>
    </div>
</template>
<script>
// import TabItm1 from './TabItem.vue'
import TabItemT from './TabItem.vue'
export default {
  data () {
    return {
      tabs: ['衣服', '鞋子', '帽子'],
      pages: ['衣服页面', '鞋子页面', '帽子页面'],
      activeIndex: 0
    }
  },
  components: {
    // eslint-disable-next-line vue/no-unused-components
    TabItemT
  },
  methods: {
    changeIndex (index) {
      this.activeIndex = index
    }
  }
}
</script>
<style scoped>
.TabContainer {}
.top {
  margin-top: 50px;
}
</style>
